<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { usePopupStore } from '@/store/popup';
import { refundDetailInfo } from '@/api/car';
import { OrderRefundDetails } from '@/types/carOrder';

const { t } = useLocale();
const popupStore = usePopupStore();
const { carRefundDetailRef } = storeToRefs(popupStore);
const refundInfo = ref<OrderRefundDetails>();

const props = withDefaults(
  defineProps<{
    orderSn?: string;
  }>(),
  {
    orderSn: ''
  }
);

const orderSn = ref('');

popupStore.onOpened('CAR_REFUND_DETAIL', async () => {
  orderSn.value = props.orderSn;
  await getRefundDetail();
});

async function getRefundDetail() {
  const res = await refundDetailInfo(orderSn.value);
  if (res.code == 0) {
    refundInfo.value = res.data.detail;
  } else {
    popupStore.closeCarRefundDetail();
  }
}

function handleCopy() {
  uni.setClipboardData({
    data: props.orderSn,
    success() {
      uni.showToast({
        title: t('LCKey_copied')
      });
    }
  });
}
</script>

<template>
  <apt-popup-car
    ref="carRefundDetailRef"
    :showConfirmBtn="false"
    :title="t('DiningPreOrderFefundInformation')"
  >
    <view class="apt-car-refund-detail-contain">
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LRKey_orderNo') }}</view>
        <view class="apt-car-refund-detail-contain-item-t2">
          {{ refundInfo?.orderSn }}
          <text @click="handleCopy">{{ t('LRKey_copy') }}</text>
        </view>
      </view>
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LOKey_orderTime') }}</view>
        <view class="apt-car-refund-detail-contain-item-t2">{{ refundInfo?.orderCreateAt }}</view>
      </view>
<!--      <view class="apt-car-refund-detail-contain-item">-->
<!--        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LOKey_orderAmountPay') }}</view>-->
<!--        <view class="apt-car-refund-detail-contain-item-t2">{{ refundInfo?.orderAmount }}</view>-->
<!--      </view>-->
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LOKey_orderCancelTime') }}</view>
        <view class="apt-car-refund-detail-contain-item-t2">{{ refundInfo?.refundTime }}</view>
      </view>
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LOKey_orderCancelFee') }}</view>
        <view class="apt-car-refund-detail-contain-item-t2 red bold">
          {{
            t('LPKey_moneyX', {
              money: refundInfo?.cancelFee ? parseFloat(refundInfo?.cancelFee) : 0
            })
          }}
        </view>
      </view>
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">
          {{ t('LOKey_orderRefundAmount') }}
        </view>
        <view class="apt-car-refund-detail-contain-item-t2 red bold">
          {{
            t('LPKey_moneyX', { money: refundInfo?.refundAmount ? refundInfo?.refundAmount : 0 })
          }}
        </view>
      </view>
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LOKey_orderRefundScore') }}</view>
        <view class="apt-car-refund-detail-contain-item-t2 red bold">
          {{ refundInfo?.refundBalance ? parseFloat(refundInfo?.refundBalance) : 0 }}
        </view>
      </view>
      <view class="apt-car-refund-detail-contain-item">
        <view class="apt-car-refund-detail-contain-item-t1">{{ t('LOKey_orderRefundWay') }}</view>
        <view class="apt-car-refund-detail-contain-item-t2">
          {{ t('LOKey_orderRefundWayOriginal') }}
        </view>
      </view>
    </view>
  </apt-popup-car>
</template>
<style lang="scss">
.apt-car-refund-detail-contain {
  padding-bottom: 30rpx;
  &-item {
    display: flex;
    align-items: center;

    &-t1 {
      width: 212rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #adaeb0;
      line-height: 80rpx;
    }

    &-t2 {
      font-weight: 400;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 80rpx;
      display: flex;
      align-items: center;

      &.red {
        color: #d13820;
      }

      &.bold {
        font-weight: 500;
      }

      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #006ff6;
        line-height: 48rpx;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
